<template>
  <div>{{ count }}</div>
  <div>放大两倍：{{ doubleCount }}</div>
  <div>放大三倍：{{ tripleCount }}</div>
  <button @click="incrementSelf(1)">Increment</button>
  <button @click="counterStore.decrement(3)">decrement</button>
</template>

<script lang='ts' setup>
// import { useCounterStore } from "@/store/modules/counterStore";
import { useCounterStore2 as useCounterStore } from "@/store/modules/counterStore"; // setup写法
import { storeToRefs } from "pinia";

const counterStore = useCounterStore();
// const { count } = counterStore; //直接解构会失去响应式
const { count, doubleCount, tripleCount } = storeToRefs(counterStore); //使用stateToRefs包装后可以获得响应式的count值
/**
 * storeToRefs 只会包装store中的state，不会包装actions和getters等默认方法，如果需要包装，可以使用toRefs
 * toRefs  会把store中的所有方法都包装成响应式的，包括actions，浪费性能，不建议使用
*/
// console.log(counterStore);


//监听数据变化，可以用来收集日志、发送请求、本地持久化状态数据等
counterStore.$subscribe((mutation, state) => {
  console.log(mutation, state);
});

//修改store中的count值有三种方式
function incrementSelf(amount: number) {
  //第一种 直接修改，简单的数据修改可以使用这个，如果复杂的数据修改，建议使用action或者$patch
  counterStore.count += amount;

  // //第二种 调用action修改, 复杂的数据修改可以使用这个，只会调用一次watcher
  // counterStore.increment(amount);

  // //第三种 调用$patch修改
  // counterStore.$patch({ count: counterStore.count + amount });
}

</script>

<style scoped lang='scss'></style>
